<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#img{
				width: 500px;
				height: 400px;
				border: 1px solid #000;
			}
		</style>
		<script>
			/*
			window.onload = function(){
				var i = 1;
				var timer = setInterval(function(){
					console.log(i);
					i++;
					
					if(i == 10){
						clearInterval(timer);
					}
				},1000);
			}
			*/
			
			window.onload = function(){
				var imgs = ["../img/lq1.jpg","../img/lq2.jpg","../img/lq3.jpg","../img/lq6.jpg"];
				
				
				var img = document.getElementById("img");
				var start = document.getElementById("start");
				var stop = document.getElementById("stop");
				
				img.src = imgs[0];
				
				var timer;
				var i = 0;
				start.onclick = function(){
					// 在开启定时器之前, 需要将当前元素上的其他定时器关闭
					clearInterval(timer);
					/*
					 * 目前我们每点击一次按钮, 都会开启一个定时器
					 * 	点击多次就会开启多个定时器, 这就导致图片的切换速度过快
					 *  并且我们只能关闭最后一次开启的定时器
					 */
					timer = setInterval(function(){
						i = i % imgs.length;
						img.src = imgs[i];
						i++;
					}, 1000);
				}
				
				stop.onclick = function(){
					// 参数可以传递任意数据类型
					clearInterval(timer);
				}
			}
		</script>
	</head>
	<body>
		<div>
			<img src="" id="img"/><br /><br />
			<button id="start">开始</button>
			<button id="stop">暂停</button>
		</div>
	</body>
</html>
